<template>
  <div>
    <el-table
      :data="tableData"
      header-cell-class-name="eltablebg"
      style="width: 100%;margin-bottom:30px"
    >
      <el-table-column prop="create_time" :label="$t('stock.stockName')">
        <template #default="r">
          <div class="flex align-center js-st">
            <div>{{ r.row.stock_name }}</div>
            <div
              class="share-color text-10 tag us"
              v-if="r.row.stock_type === 1"
            >
              US
            </div>
            <div
              class="share-color text-10 tag hk"
              v-if="r.row.stock_type === 2"
            >
              HK
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="stock_code" :label="$t('stock.stockCode')">
      </el-table-column>
      <el-table-column prop="lever_type" :label="$t('exchange.direction')">
        <template #default="r">
          <span :class="r.row.lever_type == 1 ? 'text-green' : 'text-red'">
            {{
              r.row.lever_type == 1
                ? $t("exchange.doMore")
                : $t("exchange.short")
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="lever_open_price"
        :label="$t('exchange.openingPrice')"
      >
        <template #default="r">{{
          $currency(r.row.lever_open_price)
        }}</template>
      </el-table-column>
      <el-table-column prop="lever_hand" :label="$t('exchange.lot')">
        <template #default="r">{{ $currency(r.row.lever_hand) }}</template>
      </el-table-column>
      <el-table-column
        prop="lever_earnest_money"
        :label="$t('exchange.margin')"
      >
        <template #default="r">{{
          $currency(r.row.lever_earnest_money)
        }}</template>
      </el-table-column>
      <el-table-column align="center" prop :label="$t('deal.stoploss')">
        <template #default="r">
          <span>{{
            (r.row.stop_win_price ? $currency(r.row.stop_win_price) : "--") +
              "/" +
              (r.row.stop_lose_price ? $currency(r.row.stop_lose_price) : "--")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="profit" :label="$t('exchange.profitAndLoss')">
        <template #default="r">
          <span :class="r.row.profit > 0 ? 'text-green' : 'text-red'">
            {{
              r.row.profit > 0
                ? "+" + $currency(r.row.profit)
                : r.row.profit === 0
                ? "--"
                : $currency(r.row.profit)
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lever_now_price"
        :label="$t('exchange.closingPrice')"
      >
        <template #default="r">{{ $currency(r.row.lever_now_price) }}</template>
      </el-table-column>
      <el-table-column prop="trade_fee" :label="$t('assets.handlingFee')">
        <template #default="r">{{ $currency(r.row.trade_fee) }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lever_overnight_fee"
        :label="$t('exchange.overnightFee')"
        ><template #default="r">
          <span>{{
            r.row.lever_status === 4
              ? "--"
              : $currency(r.row.lever_overnight_fee)
          }}</span>
        </template></el-table-column
      >
      <el-table-column
        align="center"
        prop="lever_open_time"
        :label="$t('lever.opentime')"
      >
        <template #default="r">
          <span>{{ getTimeZoneDate(r.row.lever_open_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lever_close_time"
        :label="$t('lever.endtime')"
      >
        <template #default="r">
          <span>{{ getTimeZoneDate(r.row.lever_close_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" :label="$t('assets.status')">
        <template #default="r">
          <span>
            {{
              r.row.lever_status == 0
                ? $t("exchange.waitingPending")
                : r.row.lever_status == 1
                ? $t("exchange.pengding")
                : r.row.lever_status == 2
                ? $t("exchange.trading")
                : r.row.lever_status == 3
                ? $t("exchange.closed")
                : $t("exchange.cancelled")
            }}
          </span>
        </template>
      </el-table-column>

      <template #empty>
        <Norecord />
      </template>
    </el-table>
  </div>
</template>

<script>
import Norecord from "@/components/noRecord/NoRecord.vue";
import { getTimeZoneDate } from "@/utils/times.js";
export default {
  name: "Historycommission",
  props: {
    total: Number,
    current: Number,
    size: Number,
    tableData: Array,
    curentPage: Number,
  },
  components: { Norecord },
  setup() {
    return {
      getTimeZoneDate,
    };
  },
};
</script>

<style scoped lang="less">
.jump {
  width: 44px;
  height: 20px;
  line-height: 20px;
  margin-inline-start: 10px;
}
.page {
  width: 20px;
  height: 20px;
}
</style>
